<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>管理员</title>
    <link rel="stylesheet" href="/css/element-plus.css" />
    <script src="/js/vue3.js"></script>
 
  </head>
  <body>
    <style>
        .red{color:red}
        .blue{color:blue}
    </style>
    <div id="app">
        <p :class="'red'">模板， 自定义指令</p>

        <p>
            @事件名="调用函数(参数)"

            条件渲染
            v-if="表达式"
            v-else-if="表达式"
            v-else

            v-show

            列表渲染
            v-for=" x in 数组 "
            v-for=" (x, index) in 数组 "

            表单输入绑定
            v-model="响应式变量"
        </p>
        <p :class="count>=0?'blue':'red'">数量= {{ count }}</p>

        
        <button @click="test1(1)">+</button>
        <button @click="test1(-1)">-</button>

        <div>
            <input type="text" v-model="username" placeholder="用户名">
            <input type="password" v-model="password" placeholder="密码">
            <button @click="submit">提交</button>
        </div>
        
        

        <h1>{{textValue}}</h1>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
            return {
                count: 0,
                textValue: '123',
                username:"",
                password:""
            }
        },
        methods:{
            test1(v){
                this.count += v;
            },
            submit(){
                alert("用户名="+this.username)
                alert("密码="+this.password)
            }
        },
        mount(){

        }
      })
      app.mount("#app")
    </script>

  </body>
</html>
